<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>webui-按钮元素测试</title>
<link href="styles/960.css" rel="stylesheet" type="text/css"/>
<link href="styles/webui.css" rel="stylesheet" type="text/css"/>

<link href="styles/uniform.default.css" rel="stylesheet" type="text/css"/>

<link href="styles/webui-buttons.css" rel="stylesheet" type="text/css"/>
<link href="styles/gh-buttons.css" rel="stylesheet" type="text/css"/>
<link href="styles/jqueryTools/forms/default.css" rel="stylesheet" type="text/css"/>

<style type="text/css">
   .button-panel .pcontent {
	    height:60px;
		paddint:20px;
	}
	
	.table td{
	   height:30px;	
	}
</style>

</head>

<body class="macbg1">
<div class="container_12 whitebg">

	<div class="head graybg-d1 grid_12">
    		<div class="logo grid_8 alpha">
            	<h1 class="white">WebUI-FrameWork</h1>
            </div>
             <div class="logo grid_4 omega">
            	<ul  class=" linkbar white">
                   <li><a href="#">welcome: Mr </a></li>
                    <li><a href="#" class="orange-l1">my account </a></li>
                    <li><span>my account </span></li>
                </ul>
            </div>
    </div>
    
    <div class="clear-spacer"></div>
    
    
   <div class="grid_12">
      <div class="panel button-panel">
      		<h3>toolbar</h3>
            <div class="pcontent">
                 <div class="toolbar">
                 		<a class="btn-first" href="#">新 建</a>
                   <a class="btn-mid" href="#">编 辑</a>
                   <a class="btn-last" href="#">删 除</a>
                   <span class="space">&nbsp;</span>
                   <a class="btn" href="#">查 看</a>
                    <span class="space">&nbsp;</span>
                   <a class="btn-first" href="#">新 建</a>
                   <a class="btn-mid btn-current" href="#">当 前</a>
                   <a class="btn-last btn-disabled" href="#">不可用</a>
                    <span class="space">&nbsp;</span>
                    <a class="link" href="#">编辑</a>
                    <span class="space-dot">&nbsp;</span>
                   <a class="link blue" href="#">查询</a>
                   <span class="space-dot">&nbsp;</span>
                   <a class="link red" href="#">删除</a>
                   
                    <span class="space">&nbsp;</span>
                    <span class="label">数据过滤&nbsp;</span>
                    <select name="test">
                       <option value="">所有</option>
                       <option value="">社会科学</option>
                       <option value="">人文</option>
                       <option value="">自然</option>
                    </select>
                    <span class="space">&nbsp;</span>
                    <input name="query" type="text" style="width:100px;" />
                    <a class="link blue" href="#">查询</a>
                    <br class="clearf"/>
                 </div>
                 
                 
                 
        </div>
      </div>
   </div>
   
   
   
    
    <div class="clear-spacer"></div> 
    
    
    <div class="grid_12">
      <div class="panel button-panel">
      		<h3>toolbar with ico</h3>
            <div class="pcontent">
                 <div class="toolbar with ico">
                 		<a class="btn-first" href="#"><span class="ico ico-add">&nbsp;</span>新 建</a>
                   <a class="btn-mid" href="#"><span class="ico ico-edit">&nbsp;</span>编 辑</a>
                   <a class="btn-last" href="#"><span class="ico ico-del">&nbsp;</span>删 除</a>
                   <span class="space">&nbsp;</span>
                   <a class="btn" href="#"><span class="ico ico-view">&nbsp;</span>查 看</a>
                    <span class="space">&nbsp;</span>
                   <a class="btn-first" href="#"><span class="ico ico-search">&nbsp;</span>查 询</a>
                   <a class="btn-mid" href="#"><span class="ico ico-settings">&nbsp;</span>设 置</a>
                   <a class="btn-mid" href="#"><span class="ico ico-refresh">&nbsp;</span>刷 新</a>
                   <a class="btn-mid" href="#"><span class="ico ico-fav">&nbsp;</span>收 藏</a>
                   <a class="btn-mid" href="#"><span class="ico ico-home">&nbsp;</span>主 页</a>
                   <a class="btn-mid" href="#"><span class="ico ico-user">&nbsp;</span>用 户</a>
                   <a class="btn-last" href="#"><span class="ico ico-clock">&nbsp;</span>时间</a>
                   
                  
                  
                    <br class="clearf"/>
                 </div>
                 
                 
                 
        </div>
      </div>
   </div>
   
   
   
    
    <div class="clear-spacer"></div>   
    
    
    
    
    <div class="grid_12">
      <div class="panel button-panel">
      		<h3>toolbar with small ico</h3>
            <div class="pcontent">
                 <div class="toolbar with ico">
                 		<a class="btn-first" href="#"><span class="ico-small ico-sadd">&nbsp;</span>新 建</a>
                   <a class="btn-mid" href="#"><span class="ico-small ico-sedit">&nbsp;</span>编 辑</a>
                   <a class="btn-last" href="#"><span class="ico-small ico-sdel">&nbsp;</span>删 除</a>
                   <span class="space">&nbsp;</span>
                   <a class="btn" href="#"><span class="ico-small ico-sview">&nbsp;</span>查 看</a>
                    <span class="space">&nbsp;</span>
                   <a class="btn-first" href="#"><span class="ico-small ico-ssearch">&nbsp;</span>查 询</a>
                   <a class="btn-mid" href="#"><span class="ico-small ico-sset">&nbsp;</span>设 置</a>
                   <a class="btn-mid" href="#"><span class="ico-small ico-srefresh">&nbsp;</span>刷 新</a>
                   <a class="btn-mid" href="#">收 藏</a>
                   <a class="btn-last" href="#"><span class="ico-small ico-shome">&nbsp;</span>主 页</a>
                    <span class="space">&nbsp;</span>
                    <input type="checkbox" name="check" class="checkbox"/>
                    <span class="label">选择</span>
                    <span class="space">&nbsp;</span>
                   <input type="checkbox" name="check" class="checkbox"/>
                    <span class="label">其它</span>
                    <span class="space-line">&nbsp;</span>
                    <span class="space">&nbsp;</span>
                     <input type="radio" name="radio" class="radio"/>
                    <span class="label">单选</span>
                    <br class="clearf"/>
                 </div>
                 
                 
                 
        </div>
      </div>
   </div>
   
   
   
    
    <div class="clear-spacer"></div>   
    
    
    <div class="grid_12">
      <div class="panel button-panel">
      		<h3>toolbar-alpha</h3>
            <div class="pcontent">
                 
                 
                 <div class="toolbar-alpha" >
                 		<a class="btn-first" href="#"><span class="ico-small ico-sadd"></span>新 建</a>
                   <a class="btn-mid" href="#">编 辑</a>
                   <a class="btn-last" href="#">删 除</a>
                   <span class="space">&nbsp;</span>
                   <a class="btn" href="#">查 看</a>
                   
                   
                    <span class="space">&nbsp;</span>
                    
                    <span class="space">&nbsp;</span>
                    <a class="link blue" href="#">编辑</a>
                    <span class="space-line">&nbsp;</span>
                   <a class="link" href="#">查询</a>
                   <span class="space-line">&nbsp;</span>
                   <a class="link" href="#">删除</a>
                   
                    <span class="space">&nbsp;</span>
                    <span class="label">数据过滤&nbsp;</span>
                    <select name="test">
                       <option value="">所有</option>
                       <option value="">社会科学</option>
                       <option value="">人文</option>
                       <option value="">自然</option>
                    </select>
                    <span class="space">&nbsp;</span>
                    <input name="query" type="text" style="width:100px;" />
                    <a class="link blue" href="#">查询</a>
                    
                    <br class="clearf"/>
                 </div>
                 
        </div>
      </div>
   </div>
   
   
     <div class="clear-spacer"></div>
    
    
   <div class="grid_12">
      <div class="panel button-panel">
      		<h3>toolnav</h3>
            <div class="pcontent">
                 <div class="toolnav">
                 	  <a class="tbtn autumn" href="#"><span class="ico-small ico-sdown"></span>年度</a>
                       <a class="tbtn tbtn-current" href="#">日期</a>
                       <a class="tbtn tbtn-up" href="#">保管期限</a>
                       <a class="tbtn tbtn-down" href="#">点击数</a>
                       
                        <span class="space">&nbsp;</span>
                        <span class="space">&nbsp;</span>
                    <a class="link" href="#">编辑</a>
                    <span class="space-dot">&nbsp;</span>
                   <a class="link blue" href="#">查询</a>
                   <span class="space-dot">&nbsp;</span>
                   <a class="link red" href="#">删除</a>
                   <span class="space">&nbsp;</span>
                   <span class="label">数据过滤&nbsp;</span>
                    <select name="test">
                       <option value="">所有</option>
                       <option value="">社会科学</option>
                       <option value="">人文</option>
                       <option value="">自然</option>
                    </select>
                      <span class="space">&nbsp;</span>
                    <input name="query" type="text" style="width:60px;" />
                    
                   <a class="ico ico-add" href="#" title="添加">&nbsp;</a>
                    <span class="space">&nbsp;</span>
                    <span class="space">&nbsp;</span>
                    <a class="tbtn-small" href="#"><span class="ico-small ico-sgrid">&nbsp;</span>大图显示</a>
                     <a class="tbtn-small" href="#"><span class="ico-small ico-slist">&nbsp;</span>列表显示</a>
                 </div>
                 
                 
        </div>
      </div>
   </div>
   
   
   <div class="clear-spacer"></div>   
   
   <div class="grid_12">
      <div class="panel button-panel">
      		<h3>pathbar</h3>
            <div class="pcontent">
                 <div class="pathbar">
                     <div class="grid_8 alpha alpha omega">
                          <a class="path path-home" href="#">首页</a>
                          <a class="path" href="#">国内</a>
                          <span class="path gray" >2009年</span>
                      </div>
                      <div class="grid_3 alpha omega">
                           <a class="link red" href="#">技术</a>
                           <span class="space-line">&nbsp;</span>
                           
                           <span class="space">&nbsp;</span>
                           <a class="btn btn-small btn-green" href="#">新建</a>
                             <span class="space">&nbsp;</span>
                            <a class="tbtn-small" href="#"><span class="ico-small ico-slist">&nbsp;</span>列表显示</a>
                      </div>          
                 </div>
                 
        </div>
      </div>
   </div>
   
    <div class="clear-spacer"></div>   
    
     <div class="grid_12">
      <div class="panel">
      		<h3>btns</h3>
            <div class="pcontent">
                 <p>&nbsp;</p>
                 <div class="grid_2">            
  					<a class="btn btn-wide" href="#">按 钮(宽)</a><br/><br/><br/>                   
                     <a class="btn btn-large" href="#">按 钮(大)</a><br/><br/><br/>
                    <a class="btn" href="#">按 钮(中)</a><br/><br/><br/>
                    <a class="btn btn-small" href="#">按 钮(小)</a> <br/><br/><br/>
                  </div> 
                   
                  <div class="grid_2">  
                  
                    <a class="btn-round btn-wide" href="#">圆 角(宽)</a><br/><br/><br/>
                    <a class="btn-round btn-large" href="#">圆 角(大)</a><br/><br/><br/>
                    <a class="btn-round" href="#">圆 角(中)</a><br/><br/><br/>
                     <a class="btn-round btn-small" href="#">圆 角(小)</a><br/><br/><br/>
                 </div>
                 
                  <div class="grid_2">
                     <br/>
                     <a class="btn sky" href="#"><span class="ico-small ico-sgrid">&nbsp;</span>按 钮</a><br/><br/><br/>
                     <a class="btn blue" href="#"><span class="ico-small ico-sdown">&nbsp;</span>按 钮</a><br/><br/><br/>
                    <a class="btn green" href="#"><span class="ico-small ico-sup">&nbsp;</span>按 钮</a><br/><br/><br/>
                    <a class="btn green2" href="#"><span class="ico ico-up">&nbsp;</span>按 钮</a> <br/><br/><br/>
                     <a class="btn red" href="#"><span class="ico ico-down">&nbsp;</span>按 钮</a><br/><br/><br/>
                    <a class="btn orange" href="#"><span class="ico ico-left">&nbsp;</span>按 钮</a><br/><br/><br/>
                    <a class="btn autumn" href="#"><span class="ico ico-right">&nbsp;</span>按 钮</a> <br/><br/><br/>
                  </div>
                  
                     <div class="grid_2">
                     <a class="btn btn-red btn-wide" href="#">按 钮</a><br/><br/><br/>
                    <a class="btn btn-green btn-wide" href="#">按 钮</a><br/><br/><br/>
                    <a class="btn btn-green2 btn-wide" href="#">按 钮</a> <br/><br/><br/>
                     <a class="btn btn-sky btn-wide" href="#">按 钮</a><br/><br/><br/>
                    <a class="btn-round btn-blue btn-wide" href="#">按 钮</a><br/><br/><br/>
                    <a class="btn btn-orange btn-wide" href="#">按 钮</a> <br/><br/><br/>
                    <a class="btn btn-gray btn-wide" href="#">按 钮</a> <br/><br/><br/>
                    <a class="btn btn-black btn-wide" href="#">按 钮</a> <br/><br/><br/>
                  </div>
                  
                     <div class="grid_2">
                     <a class="btn btn-red" href="#"><span class="ico ico-add-h">&nbsp;</span>添加</a><br/><br/><br/>
                    <a class="btn btn-green " href="#"><span class="ico ico-key-h">&nbsp;</span>钥匙</a><br/><br/><br/>
                    <a class="btn btn-green2" href="#"><span class="ico ico-lock-h">&nbsp;</span>锁定</a> <br/><br/><br/>
                     <a class="btn btn-sky" href="#"><span class="ico ico-unlock-h">&nbsp;</span>解锁</a><br/><br/><br/>
                    <a class="btn-round btn-blue btn-wide" href="#">按 钮</a><br/><br/><br/>
                    <a class="btn btn-orange btn-wide" href="#">按 钮</a> <br/><br/><br/>
                    <a class="btn btn-gray btn-wide" href="#">按 钮</a> <br/><br/><br/>
                    <a class="btn btn-black btn-wide" href="#">按 钮</a> <br/><br/><br/>
                  </div>  
                  <br class="clearf"/>
        </div>
        <br class="clearf"/>
      </div>
   </div>
   
   
    <div class="clear-spacer"></div>   
    
     <div class="grid_12">
      <div class="panel button-panel">
      		<h3>gh-buttons</h3>
            <div class="pcontent">
                      <div class="grid_3 alpha omega">
                              
                                  <a href="#" class="button"> &nbsp;按 钮&nbsp; </a>
                                   <a href="#" class="button pill"> &nbsp;按 钮&nbsp; </a>
                                    <a href="#" class="button danger"> &nbsp;按 钮&nbsp; </a>
                                   
                              
                          </div>
                          
                           <div class="grid_3">
                               <div class="button-group">
                                  <a href="#" class="button"> &nbsp;按 钮&nbsp; </a>
                                   <a href="#" class="button"> &nbsp;按 钮&nbsp; </a>
                                    <a href="#" class="button danger"> &nbsp;按 钮&nbsp; </a>
                                   
                               </div>
                          </div>
                          
                           <div class="grid_3">
                               <div class="button-group">
                                  <a href="#" class="button primary pill"> &nbsp;按 钮&nbsp; </a>
                                   <a href="#" class="button pill "> &nbsp;按 钮&nbsp; </a>
                                    <a href="#" class="button pill danger"> &nbsp;按 钮&nbsp; </a>
                                   
                               </div>
                          </div>      
                          
                         
                 
           </div>
      </div>
   </div>
   
    <div class="clear-spacer"></div> 
   
    <div class="grid_12">
      <div class="panel button-panel">
      		<h3>gh-button-group</h3>
            <div class="pcontent">
                  
                   <div class="button-group">
                      <a href="#" class="button icon add"> &nbsp;添加&nbsp; </a>
                       <a href="#" class="button icon edit"> &nbsp;编辑&nbsp; </a>
                        <a href="#" class="button icon loop"> &nbsp;刷新&nbsp; </a>
                       <a href="#" class="button icon search"> &nbsp;查询&nbsp; </a>
                       <a href="#" class="button icon user"> &nbsp;用户管理&nbsp; </a>
                   </div>
                 
        </div>
      </div>
   </div>
   
   
    <div class="clear-spacer"></div>   
    
     <div class="grid_12">
      <div class="panel button-panel">
      		<h3>links</h3>
            <div class="pcontent">
                  
                   <div class="linkbar blue">
                       <a href="#" class="link" > 添加</a>
                       <a href="#"  class="link" > 编辑</a>
                        <a href="#" class="link" >刷新</a>
                       <a href="#" class="link">查询</a>
                       <a href="#" class="link" >用户管理</a>
                   </div>
                   <br class="clearf"/>
                   <p>&nbsp;</p>
                   &nbsp;&nbsp;<a href="#">添加</a>&nbsp;&nbsp;
                   <a href="#" class="red">删除</a>&nbsp;&nbsp;
                   <a href="#" class="green">编辑</a>&nbsp;&nbsp;
                   <a href="#" class="green2">查看</a>&nbsp;&nbsp;
                   <a href="#" class="sky">排序</a>&nbsp;&nbsp;
                   <a href="#" class="blue">刷新</a>&nbsp;&nbsp;
                   <a href="#" class="orange">删除</a>&nbsp;&nbsp;
                    <a href="#" class="autumn">编辑</a>&nbsp;&nbsp;
                    <a href="#" class="coffee">查看</a>&nbsp;&nbsp;
                    <a href="#" class="earth">按钮</a>&nbsp;&nbsp;
                    <a href="#" class="bluegray">编辑</a>&nbsp;&nbsp;
                    <a href="#" class="grayblue">按钮</a>&nbsp;&nbsp;
                 
        </div>
      </div>
   </div>
   
    <div class="clear-spacer"></div>   
   
   <div class="grid_12">
      <div class="panel button-panel">
      		<h3>link-buttons</h3>
            <div class="pcontent">
                  
                   <div class="linkbar blue">
                       <a href="#" class="link graybg" > 添加</a>
                       <a href="#"  class="link redbg" > 编辑</a>
                        <a href="#" class="link bluebg" >刷新</a>
                       <a href="#" class="link orangebg">查询</a>
                       <a href="#" class="link greenbg" >用户管理</a>
                   </div>
                   <br class="clearf"/>
                   <p>&nbsp;</p>
                   &nbsp;&nbsp;<a href="#" class="graybg">添加</a>&nbsp;&nbsp;
                   <a href="#" class="redbg">删除</a>&nbsp;&nbsp;
                   <a href="#" class="skybg">编辑</a>&nbsp;&nbsp;
                   <a href="#" class="greenbg2">查看</a>&nbsp;&nbsp;
                   <a href="#" class="greenbg3">查看</a>&nbsp;&nbsp;
                   <a href="#" class="greenbg">排序</a>&nbsp;&nbsp;
                   <a href="#" class="bluebg">这是大量文字的链接</a>&nbsp;&nbsp;
                   <a href="#" class="orangebg">删除</a>&nbsp;&nbsp;
                    <a href="#" class="autumnbg">编辑</a>&nbsp;&nbsp;
                    <a href="#" class="coffeebg">查看</a>&nbsp;&nbsp;
                    <a href="#" class="earthbg">按钮</a>&nbsp;&nbsp;
                    <a href="#" class="bluegraybg">编辑</a>&nbsp;&nbsp;
                    <a href="#" class="graybluebg">按钮</a>&nbsp;&nbsp;
                    <a href="#" class="pinkbg">编辑</a>&nbsp;&nbsp;
                 
        </div>
      </div>
   </div>
   
    <div class="grid_12">
      <div class="panel">
      		<h3>buttons ico reference <span class="blue">(ie6 cant see ico with gh-buttons!)</span></h3>
            <div class="pcontent">
            
              <div  class="grid_4">
                  <h1 class="red" style="margin:10px;">gh-buttons</h1>
                   <table class="table">

                <thead>

                    <tr>

                        <th scope="col">Class</th>

                        <th scope="col">Example</th>

                    </tr>

                </thead>

                <tr>

                    <td scope="row"><code>.arrowup</code></td>

                    <td><a href="#button" class="button icon arrowup">Move up</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.arrowdown</code></td>

                    <td><a href="#button" class="button icon arrowdown">Move down</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.arrowleft</code></td>

                    <td><a href="#button" class="button icon arrowleft">Move left</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.arrowright</code></td>

                    <td><a href="#button" class="button icon arrowright">Move right</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.approve</code></td>

                    <td><a href="#button" class="button icon approve">Approve registration</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.add</code></td>

                    <td><a href="#button" class="button icon add">Add post</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.remove</code></td>

                    <td><a href="#button" class="button danger icon remove">Remove item</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.log</code></td>

                    <td><a href="#button" class="button icon log">View log</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.calendar</code></td>

                    <td><a href="#button" class="button icon calendar">Add to calendar</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.chat</code></td>

                    <td><a href="#button" class="button icon chat">Start chat</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.clock</code></td>

                    <td><a href="#button" class="button icon clock">Start timer</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.settings</code></td>

                    <td><a href="#button" class="button icon settings">Settings</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.comment</code></td>

                    <td><a href="#button" class="button icon comment">Add comment</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.fork</code></td>

                    <td><a href="#button" class="button icon fork">Fork</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.like</code></td>

                    <td><a href="#button" class="button icon like">Like</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.favorite</code></td>

                    <td><a href="#button" class="button icon favorite">Favorite</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.home</code></td>

                    <td><a href="#button" class="button icon home">Back to homepage</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.key</code></td>

                    <td><a href="#button" class="button icon key">Password protect</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.lock</code></td>

                    <td><a href="#button" class="button icon lock">Lock</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.unlock</code></td>

                    <td><a href="#button" class="button icon unlock">Unlock</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.loop</code></td>

                    <td><a href="#button" class="button icon loop">Resend message</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.search</code></td>

                    <td><a href="#button" class="button icon search">Search</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.mail</code></td>

                    <td><a href="#button" class="button icon mail">Send email</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.move</code></td>

                    <td><a href="#button" class="button icon move">Move</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.edit</code></td>

                    <td><a href="#button" class="button icon edit">Edit post</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.pin</code></td>

                    <td><a href="#button" class="button icon pin">Pin to Map</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.reload</code></td>

                    <td><a href="#button" class="button icon reload">Reload page</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.rss</code></td>

                    <td><a href="#button" class="button icon rss">Subscribe to RSS feed</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.tag</code></td>

                    <td><a href="#button" class="button icon tag">Add tag</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.trash</code></td>

                    <td><a href="#button" class="button danger icon trash">Delete post</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.user</code></td>

                    <td><a href="#button" class="button icon user">Add new user</a></td>

                </tr>

            </table>
            
            
            </div>
            
                          <div  class="grid_4">
                           <h1 class="green" style="margin:10px;">buttons</h1>
                  
                   <table class="table">

                <thead>

                    <tr>

                        <th width="87" scope="col">Class</th>

                        <th width="105" scope="col">Example</th>

                    </tr>

                </thead>

                <tr>

                    <td scope="row"><code>.ico-up</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-up">&nbsp;</span>向 上</a> 
                      </td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-down</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-down">&nbsp;</span>向 下</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-left</code></td>

                    <td>
                    <a class="btn" href="#"><span class="ico ico-left">&nbsp;</span>向 左</a>
                   </td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-right</code></td>

                    <td> <a class="btn" href="#"><span class="ico ico-right">&nbsp;</span>向 右</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-approve</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-approve">&nbsp;</span>应 用</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-add</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-add">&nbsp;</span>添 加</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-del</code></td>

                    <td><a class="btn red" href="#"><span class="ico ico-del">&nbsp;</span>删 除</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-view</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-view">&nbsp;</span>查 看</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-cal</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-chat</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-clock</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-clock">&nbsp;</span>时 间</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-set</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-set">&nbsp;</span>设 置</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-comment</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-fork</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-like</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-like">&nbsp;</span>喜 欢</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-fav</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-fav">&nbsp;</span>收 藏</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-home</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-home">&nbsp;</span>主 页</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-key</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-key">&nbsp;</span>钥 匙</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-lock</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-lock">&nbsp;</span>锁 定</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-unlock</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-unlock">&nbsp;</span>解 锁</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-loop</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-search</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-search">&nbsp;</span>搜 索</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-mail</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-mail">&nbsp;</span>邮 件</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-move</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-move">&nbsp;</span>移 动</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-edit</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-edit">&nbsp;</span>编 辑</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-pin</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-refresh</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-refresh">&nbsp;</span>刷 新</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-rss</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-rss">&nbsp;</span>Rss</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-tag</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-tag">&nbsp;</span>标 签</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-trash</code></td>

                    <td><a class="btn red" href="#"><span class="ico ico-trash">&nbsp;</span>移 除</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-user</code></td>

                    <td><a class="btn" href="#"><span class="ico ico-user">&nbsp;</span>用 户</a></td>

                </tr>

            </table>
            </div>
            
            
            <div  class="grid_3">
                           <h1 class="blue" style="margin:10px;">buttons (small icos)</h1>
                  
                   <table class="table">

                <thead>

                    <tr>

                        <th width="110" scope="col">Class</th>

                        <th width="98" scope="col">Example</th>

                    </tr>

                </thead>

                <tr>

                    <td scope="row"><code>.ico-sup</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-sup">&nbsp;</span>向 上</a> 
                      </td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sdown</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-sdown">&nbsp;</span>向 下</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sleft</code></td>

                    <td>
                    
                   </td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sright</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sapprove</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-sapprove">&nbsp;</span>应 用</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sadd</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-sadd">&nbsp;</span>添 加</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sdel</code></td>

                    <td><a class="btn red" href="#"><span class="ico-small ico-sdel">&nbsp;</span>删 除</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sview</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-sview">&nbsp;</span>查 看</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-scal</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-schat</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sclock</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sset</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-sset">&nbsp;</span>设 置</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-scomment</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sfork</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-slike</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sfav</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-shome</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-shome">&nbsp;</span>主 页</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-skey</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-slock</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sunlock</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sloop</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-ssearch</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-ssearch">&nbsp;</span>搜 索</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-smail</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-smove</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-sedit</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-sedit">&nbsp;</span>编 辑</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-spin</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-srefresh</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-srefresh">&nbsp;</span>刷 新</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-srss</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-stag</code></td>

                    <td></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-strash</code></td>

                    <td><a class="btn" href="#"><span class="ico-small ico-strash">&nbsp;</span>移 除</a></td>

                </tr>

                <tr>

                    <td scope="row"><code>.ico-suser</code></td>

                    <td></td>

                </tr>

            </table>
            </div>
            
            
                  <br class="clearf"/>
           </div>
            <div class="clearf"></div>   

          
      </div>
      
   </div>
   
   
    <div class="clear-spacer"></div>   

    
    
    
    <div class="grid_12 panel foot silverbg"  >
             <p><a href="#">welcome: Mr </a>  |  <a href="#" class="orange-l1">my account </a> | <span>my account </span></p>
             <p>copy rights  汉龙数码科技有限公司2001－2011</p>
      </div>
      <div class="clear"></div>
       <div class="spacer"></div>
    
</div>   

</body>
</html>
